<template>
  <div class="raffle-bj" :style="backgroundStyle">
    <!-- <div class="return" @click="$router.go(-1)">返回</div> -->
    <!-- <div class="rule" @click="isRule">规则</div> -->

      <div class="frame">
        <div class="frameRule" @click="isRule">活动规则</div>
        <div class="frameRule frameCard" @click="myCard">中奖记录</div>
      </div>
    <div class="title" :style="activityNameImg">
      {{mallActivityEntity.name}}
    </div>
    <div class="staging" :style="lotteryPlatformImg">
      <div class="stag-content">
        <div v-for="(item,idx) in goodslist" :key="idx">
          <!-- index==4显示抽奖次数否者奖品展示 -->
          <div class="start" :style="centerbackground" v-if="idx==4">
            <div class="start-title">抽奖</div>
            <!-- <div class="start-number">{{number?number:'0'}}次</div> -->
          </div>
          <div class="list" :style="Shopbackground" v-else>
            <img class="list_img" :src="item.url" alt="">
            <div class="list_name">{{item.goodsName}}</div>
            <div class="shadow" v-if="item.index==index"></div>
          </div>
        </div>
      </div>
      <div class="submit" :style="backButton" @click="submitPlace"></div>
    </div>

    <activityRule :show="ruleShow" :title="mallActivityEntity.strategy" @isRule="isRule"></activityRule>

    <changePhone :show="updatePhoneShow" @phoneCancel="updatePhoneShow = false" :titles="titles"></changePhone>
  </div>
</template>

<script>
  import {
    nineActivityInfo,
    ninePlaceOrder,
    nineDraw,
    postPrepay
  } from '@/api/raffle.js'
  import changePhone from '@/components/changePhone'
  import activityRule from '@/components/activityRule'
  import { setStore, getStore, removeStore } from '@/utils/storage'
  import {
    Dialog,
    Toast,
    List
  } from 'vant'
  export default {
    components:{
      changePhone,
      activityRule
    },
    data() {
      return {
        ruleShow:false,
        titles:'绑定手机号',
        updatePhoneShow:false, //手机号弹窗
        loading: false,
        finished: false,
        nameList:[],
        goodslist:[],
        mallActivityEntity:{},//活动信息
        activityCode:'TCJ01', //活动唯一code
        index:999, //抽奖阴影
        timer:null, //计时器
        speed:200, //移动速度
        isup:false,
        sort:999, //中奖等级
        isSettimer:false, // 立即抽奖锁
        number:0,//抽奖次数
        goodsName:'',
        lotteryBool:'',
        imgObject:{}
      }
    },
    computed: {
      // 背景图
      backgroundStyle() {
        return {
          backgroundImage: `url(${this.imgObject.backgroundImg})`,
          backgroundSize: '100% 100%', // 根据需要设置
        };
      },
      //按钮
      backButton() {
        return {
          backgroundImage: `url(${this.imgObject.buttonImg})`,
          backgroundSize: '100% 100%', // 根据需要设置
        };
      },
      //商品背景
      Shopbackground() {
        return {
          backgroundImage: `url(${this.imgObject.goodsBackgroundImg})`,
          backgroundSize: '100% 100%', // 根据需要设置
        };
      },
      //中间背景
      centerbackground() {
        return {
          backgroundImage: `url(${this.imgObject.goodsSuccessBackgroundImg})`,
          backgroundSize: '100% 100%', // 根据需要设置
        };
      },
      //活动名称展示图片
      activityNameImg() {
        return {
          backgroundImage: `url(${this.imgObject.activityNameImg})`,
          backgroundSize: '100% 100%', // 根据需要设置
        };
      },
      //抽奖台图片
      lotteryPlatformImg() {
        return {
          backgroundImage: `url(${this.imgObject.lotteryPlatformImg})`,
          backgroundSize: '100% 100%', // 根据需要设置
        };
      },
    },
    mounted() {
      this.activityCode = this.$route.query.activityCode
      setStore('activityCode',this.$route.query.activityCode)
      this.nineActivityInfo()
    },
    methods: {
      submitPlace(){
        let that = this
        let data ={
          activityId:this.mallActivityEntity.id
        }
        ninePlaceOrder(data).then(res=>{
          console.log(res)
            that.orderSn = res.data.orderSn
            if(res.code==0){
              if(res.data.needToPay==1){
                let pay = {
                  orderId:res.data.orderSn,
                  tradeType:'JSAPI'
                }
                that.prepay(pay)
              }else{
                that.start()
              }
            }else{
              that.showToast(res.msg)
            }
        }).catch(res=>{
          console.log(1)
          if(res.code==7){
            this.updatePhoneShow = true
          }else{
            that.showToast(res.msg)
          }
        })
      },
      //预支付(拿到微信支付参数)
      prepay(pay){
        let that = this
        console.log(1)
        postPrepay(pay).then(res=>{
          console.log(res)
          if (res.msg === 'success') {
            if (typeof WeixinJSBridge === 'undefined') {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, false)
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady)
                document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady)
              }
            } else {
              that.onBridgeReady(res.data)
            }
          }
        }).catch(fail=>{
          that.showToast(fail.msg)
        })
      },
      // 微信支付预支付OK时，发起真正微信支付请求
      onBridgeReady(data) {
        const that = this
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            appId: data.appId, // 公众号名称，由商户传入
            timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: data.nonceStr, // 随机串
            package: data.packageValue, // 微信订单id
            signType: 'MD5', // 微信签名方式：
            paySign: data.paySign // 微信签名
          },
          function(res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              that.showToast('支付成功...')
              setTimeout(() => {
               that.start()
              }, 1000);
            } else {
              that.showToast('未完成支付...')
              return
            }
          })
      },
      start(){
        if(this.isSettimer) return
        let data = {
          activityId:this.mallActivityEntity.id,
          number:1,
          orderSn:this.orderSn
        }
        nineDraw(data).then(res=>{
          this.isSettimer = true
          if(res.code==0){
            this.index = 0
            this.speed = 200
            this.isup = false
            this.sort = res.data.angle
            this.goodsName = res.data.goodsName
            // this.number = res.data.number
            this.lotteryBool=res.data.lotteryBool
            this.settimer()
          }else{
            Dialog.alert({
              message: res.msg,
            }).then(() => {
              // on close
            });
          }
        }).catch(res=>{
          if(res.code==7){
            this.updatePhoneShow = true
          }
          Dialog.alert({
            message: res.msg,
          }).then(() => {
            // on close
          });
        })
      },
      // 滚动
      settimer(){
        this.timer = setTimeout(()=>{
          if(this.speed==270+10*(this.sort)){
            clearTimeout(this.timer)
            this.isSettimer = false
            if(!this.lotteryBool){
              Dialog.alert({
                message: '非常遗憾未中奖',
              }).then(() => {
                // on close
              });
            }else{
              Dialog.alert({
                message: '恭喜您抽中了'+this.goodsName+'可前往中奖记录查看',
              }).then(() => {
                // on close
              });
            }
          }else{
            this.index = this.index==7?0:this.index+1
            console.log(this.index)
            if(this.isup){
              this.speed+=10
            }else{
              if(this.speed==-1000){
                this.isup = true
                this.speed+=10
              }else{
                this.speed-=10
              }
            }
            this.settimer()
          }
        },this.speed)
      },
      // 活动卡卷
      myCard() {
        this.$router.push({
          path: '/mycard?id='+this.mallActivityEntity.id
        })
      },
      onLoad(){
        this.finished = true
      },
      // 获取活动信息
      nineActivityInfo(){
        let data = {
          activityCode:this.activityCode
        }
        nineActivityInfo(data).then(res=>{
          setStore('appid',res.data.mallActivityEntity.appId)
          let goodslist = []
          let listIndex = [0,1,2,7,3,6,5,4]
          res.data.goodslist.forEach((item,index)=>{
            goodslist.push({
              index:listIndex[index],
              goodsName:res.data.goodslist[listIndex[index]].goodsName,
              url:res.data.goodslist[listIndex[index]].url
            })
            if(index==3){
              goodslist.push(1)
            }
          })
          this.goodslist = goodslist
          this.mallActivityEntity = res.data.mallActivityEntity
          this.imgObject = res.data
        })
      },
      // 活动规则
      isRule(){
        this.ruleShow = !this.ruleShow
      },
      showToast(msg) {
        this.$toast({
          message: msg,
          position: 'center',
          duration: 2500
        })
      },
    }
  }
</script>

<style lang="less" scoped>
.raffle-bj{
  width: 375px;
  height: 775px;
  // background: url('../../../static/nineRaffle/raffleBj.png') no-repeat;
  // background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  .frameCard {
    margin-top: 10px;
  }

  .frameRule {
    width: 26px;
    height: 90px;
    background: rgb(103, 123, 134);
    font-size: 14px;
    text-align: center;
    line-height: 18px;
    // font-weight: bold;
    color: #fff;
    border-radius: 12px 0 0 12px;
    box-sizing: border-box;
    padding-top: 9px;
  }

  .frame {
    position: absolute;
    top: 20px;
    right: 0;
  }
  .title{
    width: 288px;
    height: 53px;
    margin: 60px auto 0;
    text-align: center;
    line-height: 53px;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    position: relative;
  }
  .staging{
    width: 343px;
    height: 469px;
    margin: -17px auto 0;
    overflow: hidden;
    .stag-content{
      display: flex;
      justify-content: flex-start;
      width: 239px;
      height: 210px;
      margin: 65px auto 0;
      overflow: hidden;
      flex-wrap: wrap;
      .list{
        width: 75px;
        height: 67px;
        flex-shrink: 0;
        margin-left: 3px;
        margin-top: 2px;
        overflow: hidden;
        position: relative;
        .shadow{
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, .3);
          border-radius: 5px;
          position: absolute;
          top: 0;
          left: 0;
        }
        .list_img{
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        .list_name{
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 5px;
          left: 0;
          font-size: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding: 0 2px;
          color: #333333;
        }
      }
      .start{
        width: 75px;
        height: 67px;
        flex-shrink: 0;
        margin-left: 3px;
        margin-top: 2px;
        overflow: hidden;
        .start-title{
          width: 100%;
          height: 67px;
          font-size: 25px;
          font-weight: bold;
          color: #983F28;
          line-height: 67px;
          text-align: center;
          // margin-top: 10px;
        }
        .start-number{
          width: 49px;
          height: 16px;
          background-color: #F6A73F;
          border-radius: 9px;
          text-align: center;
          line-height: 16px;
          color: #983F28;
          font-size: 13px;
          margin: 7px auto 0;
        }
      }
    }
    .submit{
      width: 155px;
      height: 42px;
      margin: 20px auto 0;
    }
  }
  .hg{
    width: 331px;
    height: 15px;
    background-color: #E32D0E;
    margin: -70px auto 0;
    border-radius: 8px;
  }
  .name-list{
    width: 316px;
    height: 257px;
    background: url('../../../static/nineRaffle/nameBj.png') no-repeat;
    background-size: 100% 100%;
    margin: -7.5px auto 0;
    overflow: hidden;
    .name-list-title{
      width: 100%;
      height: 22px;
      line-height: 22px;
      color: #EF3926;
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      margin-top: 21px;
    }
  }
  .return{
    width: 50px;
    height: 27px;
    background-color: #362A0935;
    text-align: center;
    line-height: 27px;
    color: #FCFBFB;
    font-size: 13px;
    letter-spacing: 2px;
    border-radius: 0 20px 20px 0;
    position: absolute;
    top: 15px;
    left: 0;
  }
  .rule{
    width: 50px;
    height: 27px;
    background-color: #362A0935;
    text-align: center;
    line-height: 27px;
    color: #FCFBFB;
    font-size: 13px;
    letter-spacing: 2px;
    border-radius: 20px 0 0 20px;
    position: absolute;
    top: 15px;
    right: 0;
  }
  .canvas-list{
    width: 275px;
    height: 180px;
    margin: 10px auto 0;
    overflow: auto;
    .van-list{
      height: 180px;
      border: 0;
      .list{
        width: 100%;
        height: 14px;
        margin-top: 6px;
        color: #333333;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .time{
        width: 77px;
        height: 14px;
        line-height: 14px;
      }
      .phone{
        width: 81px;
        height: 14px;
        line-height: 14px;
        margin-left: 10px;
      }
      .name{
        width: 97px;
        height: 14px;
        line-height: 14px;
        margin-left: 10px;
      }
      scroll-view ::-webkit-scrollbar {
        display:none;
        width:0;
        height:0;
        color:transparent;
      }
    }
    .van-cell::after{
      border-bottom: 0 !important;
    }
  }
  .popupBody {
  	position: relative;
  	display: flex;
  	flex-direction: column;
  	font-size: 15px;
  	padding: 0 10px;
  	width: 300px;
  	background: #fff;
  	border-radius: 9px;
  }
  .popupShow {
  	position: fixed;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	top: 0;
  	background: rgba(0, 0, 0, 0.5);
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	z-index: 999;
  }
  .popupContent {
  	width: 100%;
  	max-height: 410px;
  	min-height: 410px;
  	overflow: auto;
  	font-size: 13px;
  	margin-top: 40px;
  }
  .cha {
  	margin-top: 15px;
  	width: 30px;
  	height: 30px;

  }
}
</style>
